﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Amazon Slicer</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>
    
    <style type="text/css">
        /*css_begin*/
        .slicerHeader{
	        position:relative;
	        padding-top:1px;
        }

        .hover{
	        color:#E47911;
        }

        .filtered{
	        background-color:#FFFFFF;
        }

        .filteredOutByOther{
	        color:#A6A8B1;
        }

        .filteredOutBySelf{
	        background-color:#FFFFFF;
        }
        /*css_end*/
    </style>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        var dataNames = ["Image", "Description", "Brand", "Price", "Internal Memory", "Network", "Avg. Customer Review", "ShipToChina"];   //"size",
        var datas = [["NOKIA521.jpg", "Nokia Lumia 521 T-Mobile Cell Phone - White", "Nokia", "49.99", "16", "3G", "4", true],
                ["LG450.jpg", "LG 450 Black - No Contract (T-Mobile)", "LG", "29.99", "4", "3G", "4", true],
                ["LGC365.jpg", "LG Xpression C395 Unlocked GSM Slider Cell Phone with Touchscreen + Full QWERTY Keyboard - Red", "LG", "49.99", "32", "3G", "3.5", false],
                ["BLUPink.jpg", "BLU Dash JR W D141w Unlocked GSM Dual-SIM Android Cell Phone - Pink", "BLU", "18.99", "4", "3G", "4", true],
                ["BLUWhite.jpg", "BLU Dash JR W D141w Unlocked GSM Dual-SIM Android Cell Phone - White", "BLU", "129.99", "32", "4G", "4", false],
                ["LGA275.jpg", "LG A275 Black Unlocked GSM Dual SIM QuadBand Cell Phone - International Version - No Warranty", "LG", "79.89", "4", "3G", "4", false],
                ["BLUBlue.jpg", "BLU Dash JR W D141w Unlocked GSM Dual-SIM Android Cell Phone - Blue", "BLU", "59.99", "4", "GSM", "4", false],
                ["LGVN250.jpg", "LG Cosmos VN250 Verizon Phone (POST PAID)", "LG", "449.99", "64", "4G", "3.5", false],
                ["LGOptimus.jpg", "LG Optimus Dynamic Android Prepaid Phone with Triple Minutes (Tracfone)", "LG", "29.99", "16", "GSM", "4", true],
                ["LG305c.jpg", "Tracfone LG 305C with Triple Minutes for Life (Tracfone)", "LG", "99.99", "16", "3G", "4", false],
                ["SamsungC3520.jpg", "Samsung GT-C3520I Unlocked Quad-Band GSM Phone with 1.3 MP Camera, MP3 Player...", "Samsung", "64.99", "8", "3G", "3.5", false],
                ["LGVN251.jpg", "LG VN251 VN 251 COSMOS 2 Verizon Wireless Slider Keyboard Bluetooth Cell Phone", "LG", "58.69", "16", "4G", "4", false],
                ["ZTEUSAZ222.jpg", "AT&T Z222 Go Phone (AT&T)", "ZTE USA", "24.85", "4", "4G", "4", false],
                ["BLUQ170T.jpg", "BLU Q170T Samba TV Unlocked Dual SIM Quad-Band GSM Phone (Black/Red)", "BLU", "26.08", "32", "3G", "4", true],
                ["Apple4SWhite.jpg", "Apple iPhone 4S GSM Unlocked 16GB Smartphone - White", "Apple", "199.99", "16", "GSM", "4", false],
                ["LG840G.jpg", "LG 840G Prepaid Phone With Triple Minutes (Tracfone)", "LG", "48.95", "32", "4G", "4", false],
                ["SamsungA157V.jpg", "Samsung a157V (AT&T)", "Samsung", "14.99", "8", "3G", "3.5", false],
                ["LGVN150.jpg", "LG Revere VN150 Bluetooth CDMA Camera Flip Cell Phone Verizon or PagePlus", "LG", "72.50", "2", "GSM", "4", false],
                ["NOKIA106.jpg", "Nokia 106 Unlocked GSM Dual-Band Cell Phone w/ SMS and FM Radio - Black", "Nokia", "17.99", "2", "GSM", "4", false],
                ["ZTEZ222.jpg", "Unlocked ZTE Z222 Flip Phone With Camera For ATT, T-Mobile and Other Supported GSM Networks...", "ZTE", "27.79", "16", "4G", "4", false],
                ["Apple4SUnlocked.jpg", "Apple iPhone 4S 16GB 3G WiFi Black Smartphone Unlocked", "Apple", "182.99", "16", "3G", "4", false],
                ["BLUQ170TBlue.jpg", "BLU Q170T Samba TV Unlocked Dual SIM Quad-Band GSM Phone (Black/Blue)", "BLU", "22.99", "2", "GSM", "4", false],
                ["SamsungC3520Gray.jpg", "Samsung GT-C3520BLK Unlocked GSM Cell Phone,Charcoal Gray", "Samsung", "99.99", "8", "3G", "4", false],
                ["LG306G.jpg", "LG 306G 3G Cell Phone | TracFone", "TracFone", "4.99", "2", "GSM", "4", false]];
        $(document).ready(function () {            
            var dataSource = new GcSpread.Slicer.GeneralSlicerData(datas, dataNames);
            var brandSlicer = new AmazonSlicer($("#slicer_Brand")[0]);
            brandSlicer.setData(dataSource, "Brand");
            var memorySlicer = new AmazonSlicer($("#slicer_Memory")[0]);
            memorySlicer.setData(dataSource, "Internal Memory");
            var netWorkSlicer = new AmazonSlicer($("#slicer_Network")[0]);
            netWorkSlicer.setData(dataSource, "Network");
            var customerReviewSlicer = new AmazonSlicer($("#slicer_CustomerReview")[0]);
            customerReviewSlicer.setData(dataSource, "Avg. Customer Review");
        });

        function AmazonSlicer(container) {
            this.container = container;
        }
        AmazonSlicer.prototype = new GcSpread.Slicer.SlicerBase();
        AmazonSlicer.prototype.constructor = AmazonSlicer;

        AmazonSlicer.prototype.onDataLoaded = function () {
            var header = $("<div class=\"slicerHeader\">" +
                    "<div class=\"slicerHeaderBorder\"></div>" +
                    "<span style=\"font-size:medium\">" + this.columnName + "</span>" +
                    "<div class=\"slicerHeaderBorder\"></div>" +
                    "</div>")[0];
            $(this.container).addClass("slicer").append(header);
            $(header).on("mousedown", { slicer: this }, function (e) {
                var slicer = e.data.slicer;
                slicer.slicerData.doUnfilter(slicer.columnName);

                if (slicer.columnName !== "Avg. Customer Review") {
                    var childNodes = this.parentNode.childNodes;
                    for (var i = 1, length = childNodes.length; i < length; i++) {
                        childNodes[i].childNodes[0].checked = false;
                    }
                }
            });

            var datas = this.exclusiveDatas;
            var items = [];
            if (this.columnName === "Avg. Customer Review") {
                for (var i = 0; i < datas.length; i++) {
                    var count = 0;
                    for (var j = 0; j < datas.length; j++) {
                        if (parseFloat(datas[j]) >= parseFloat(datas[i])) {
                            count += this.slicerData.getRowIndexes(this.columnName, this.slicerData.getExclusiveData(this.columnName).indexOf(datas[j])).length;
                        }
                    }
                    $(this.container).append("<div><img src=\"images\/" + datas[i] + ".png\" alt=\"" + datas[i] + "\"style=\"vertical-align:middle\"></img><span>& Up</span>"
                         + "<span style=\"color:#A29999\">(" + count + ")</span></div>");
                    items.push(this.container.lastChild);
                }
            } else {
                for (var i = 0; i < datas.length; i++) {
                    var count = this.slicerData.getRowIndexes(this.columnName, this.slicerData.getExclusiveData(this.columnName).indexOf(datas[i])).length;
                    $(this.container).append("<div><input type=\"checkbox\"/><span>" + datas[i] + "</span>"
                        + "<span style=\"color:#A29999\">(" + count + ")</span></div>")
                    items.push(this.container.lastChild);
                }
            }

            this.items = items;

            var ns = ".slicer";
            for (var i = 0; i < items.length; i++) {
                $(items[i]).addClass("slicerItem").on("mouseenter" + ns, function (e) {
                    $(this).addClass("hover");
                }).on("mouseleave" + ns, function (e) {
                    $(this).removeClass("hover");
                });

                if (this.columnName === "Avg. Customer Review") {
                    $(items[i]).on("mousedown" + ns, { slicer: this }, function (e) {
                        var slicer = e.data.slicer, exclusiveData = slicer.slicerData.getExclusiveData(slicer.columnName),
                            childNodes = this.parentNode.childNodes, indexes = [];
                        var currentAlt = $(this.childNodes[0]).attr("alt");

                        for (var i = 1, length = childNodes.length; i < length; i++) {
                            var tempAlt = $(childNodes[i].childNodes[0]).attr("alt");
                            if (parseFloat(tempAlt) >= parseFloat(currentAlt)) {
                                indexes.push(exclusiveData.indexOf(tempAlt));
                            }
                        }

                        if (indexes.length === 0) {
                            slicer.slicerData.doUnfilter(slicer.columnName);
                        } else {
                            slicer.slicerData.doFilter(slicer.columnName, { exclusiveRowIndexes: indexes })
                        }
                    });
                } else {
                    $(items[i].childNodes[0]).on("change" + ns, { slicer: this }, function (e) {
                        var slicer = e.data.slicer, exclusiveData = slicer.slicerData.getExclusiveData(slicer.columnName), item = this.parentNode,
                            childNodes = item.parentNode.childNodes, indexes = [];

                        for (var i = 1, length = childNodes.length; i < length; i++) {
                            if (childNodes[i].childNodes[0].checked) {
                                indexes.push(exclusiveData.indexOf(childNodes[i].childNodes[1].innerHTML))
                            }
                        }

                        if (indexes.length === 0) {
                            slicer.slicerData.doUnfilter(slicer.columnName);
                        } else {
                            slicer.slicerData.doFilter(slicer.columnName, { exclusiveRowIndexes: indexes })
                        }
                    });

                    $(items[i].childNodes[1]).on("mousedown" + ns, { slicer: this }, function (e) {
                        var slicer = e.data.slicer;
                        var exclusiveData = slicer.slicerData.getExclusiveData(slicer.columnName);
                        var item = this.parentNode;
                        var childNodes = item.parentNode.childNodes,
                            indexes = [];

                        for (var i = 1, length = childNodes.length; i < length; i++) {
                            if (childNodes[i].childNodes[0].checked) {
                                indexes.push(exclusiveData.indexOf(childNodes[i].childNodes[1].innerHTML))
                            }
                        }

                        if (!item.childNodes[0].checked) {
                            indexes.push(exclusiveData.indexOf(item.childNodes[1].innerHTML))
                            item.childNodes[0].checked = true;
                        } else {
                            indexes.splice(indexes.indexOf(exclusiveData.indexOf(item.childNodes[1].innerHTML)), 1);
                            item.childNodes[0].checked = false;
                        }

                        if (indexes.length === 0) {
                            slicer.slicerData.doUnfilter(slicer.columnName);
                        } else {
                            slicer.slicerData.doFilter(slicer.columnName, { exclusiveRowIndexes: indexes })
                        }
                    });
                }
            }

            this.onFiltered(null);
        };

        AmazonSlicer.prototype.resetClass = function () {
            var items = this.items;
            var classes = ["filtered", "partial", "filteredOutBySelf", "filteredOutByOther"];
            for (var i = 0; i < items.length; i++) {
                for (var k = 0; k < classes.length; k++) {
                    $(items[i]).removeClass(classes[k]);
                }
            }
        };

        AmazonSlicer.prototype.onFiltered = function () {
            this.resetClass();
            var items = this.items;
            var filteredItems = this.slicerData.getFilteredIndexes(this.columnName);
            for (var i = 0; i < filteredItems.length; i++) {
                $(items[filteredItems[i]]).addClass("filtered");
            }
            var filteredOutItems = this.slicerData.getFilteredOutIndexes(this.columnName, GcSpread.Slicer.FilteredOutDataType.byCurrentColumn);
            for (var i = 0; i < filteredOutItems.length; i++) {
                $(items[filteredOutItems[i]]).addClass("filteredOutBySelf");
            }
            var filteredOutByOtherItems = this.slicerData.getFilteredOutIndexes(this.columnName, GcSpread.Slicer.FilteredOutDataType.byOtherColumns);
            for (var i = 0; i < filteredOutByOtherItems.length; i++) {
                $(items[filteredOutByOtherItems[i]]).addClass("filteredOutByOther");
            }
            this.refreshList();
        };

        AmazonSlicer.prototype.refreshList = function () {
            var list = $("#ss");
            list.empty();

            var indexes = this.slicerData.getFilteredRowIndexes();
            for (i = 0, rowCount = indexes.length; i < rowCount; i++) {
                var listItem = "<div style=\"width:200px;height:200px;margin-left:20px;margin-top:10px;display:inline-block\" >"
                    + "<div class=\"p_image\"><img src=\"images\/" + datas[indexes[i]][0] + "\" style=\"width:160px;height:160px\"></img></div>"
                    + "<div class=\"p_description\" style=\"height:86px;font-size:medium;color:#0066C0\">" + datas[indexes[i]][1] + "</div>"
                    + "<div class=\"p_company\">" + "by " + datas[indexes[i]][2] + "</div>"
                    + "<div class=\"p_price\" style=\"font-weight:bold;color:#B52704\">" + "$" + datas[indexes[i]][3] + "</div>"
                    + "<div class=\"p_vote\"><img src=\"images\/" + datas[indexes[i]][6] + ".png\"/></div>"
                    + "</div>"
                list.append($(listItem)[0]);
            }
        }
        /*code_end*/
    </script>

</head>
<body>
    <div class="sample-turtorial">
        <div class="layout_slicer" style="margin-left:20px;float: left;vertical-align: top;position: relative;width: 190px;border-right:solid;border-width:1px;border-color:#DDDDDD">
            <div id="slicer_Brand" style="margin-bottom:10px;height:200px;"></div>
            <div id="slicer_Memory" style="margin-bottom:10px;height:130px;"></div>
            <div id="slicer_Network" style="margin-bottom:10px;height:100px;"></div>
            <div id="slicer_CustomerReview" style="margin-bottom:10px;height:100px;"></div>
        </div>
        <div id="ss" style="margin-top:30px;height:600px;overflow:auto"></div>
    </div>
</body>
</html>
